<!doctype html>
<html>
  <head>
    <title>Intent: Shorten</title>
    <script src="/lib/webintents.debug.js"></script>
    <script src="/lib/events.js"></script>
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/base.css" />
    <style>
      iframe {
        float:left;
        width: 50%;
        height: 800px;
      }
    </style>
     <script src="/lib/common.js"></script>
    <intent 
      action="http://webintents.org/shorten" 
      type="text/uri-list" 
      href="shorten.html" 
      title="Kinlan's Link Shortener" />
    <script>
      attachEventListener(window, "load", function() {

        var shareLink = document.getElementById("shortenLink");
        attachEventListener(shareLink, "click", function() {
          var url = document.getElementById("url").value;
          
          var intent = new Intent();
          intent.action = "http://webintents.org/shorten";
          intent.type = "text/uri-list";
          intent.data = [ url ];

          window.navigator.startActivity(intent, intentResponse);
          return false;
        }, false);

        var intentResponse = function (intentData) {
          var output = document.getElementById("output");
          setText(output, intentData.data[0]);
          focus();
        };
      }, false);
    </script>  
  </head>
  <body>
    <header>
      <h1>Example: Shorten</h1>
      <nav>
        <a href="http://webintents.org/">Web Intents</a> 
        <a href="http://webintents.org/shorten">Shorten Intent documentation</a> 
        <a href="http://examples.webintents.org/">Examples</a> 
      </nav>
    </header>
    <section>
      <p>Applications often have to </p>
      <div>
        <input id="url" name="url" type="url" value="http://paul.kinlan.me" />
        <button id="shortenLink">Shorten link</button>
      </div>
      <p>Response will appear here:</p> 
      <div id="output"></div>
    </section>
  </body>
</html>
